<template>
    <div class="category">
        <!-- <h1>分类</h1> -->
        <!-- 搜索 -->
        <van-search
            shape="round"
            placeholder="请输入搜索商品名称"
            @focus="$router.push('/search')"
        >
        </van-search>

        <!-- 分类 (滚动导航) -->
        <van-tabs class="category_s" scrollspy>
            <van-tab v-for="(categ,index) in categorys" :title="categ.cate_name" :key="index">
                <div class="categ">
                    <h3>
                        <span>{{categ.cate_name}}</span>
                    </h3>
                    <!-- 循环子分类 -->
                    <ul class="child_ca">
                        <li v-for="(ca,i) in categ.children" :key="i">
                            <router-link 
                                tag="div"
                                :to="{
                                    path:'/productlist',
                                    query:{
                                        id:ca.id,
                                        titles:ca.cate_name
                                    }
                                }">
                                <img :src="ca.pic" >
                                <h4>{{ca.cate_name}}</h4>
                            </router-link>
                        </li>
                    </ul>
                </div>
               
            </van-tab>
        </van-tabs>
        

    </div>
</template>
<script>
export default {
    data(){
        return {
            categorys:[],  //分类(标题)
        }
    },
    created(){
        this.axios("/category").then((result) => {
            // console.log("分类结果=>",result);
            this.categorys=result;
        })
    },
    
}
</script>
<style lang="less">
.van-search{
    position: sticky;
    top: 0px;
    left: 0px;
    z-index: 3;
}
.category_s{
    .van-tabs__wrap{
        position: fixed;
        left: 0px;
        top: 0px;
        width: 90px;
        height: 100vh;
        margin-top: 54px;
        .van-tabs__nav{
            display: block;
            background-color: #f7f7f7;
            padding: 0px;
            .van-tab{
                padding: 0px;
                line-height: 40px;
            }
            .van-tab--active{
                color: red;
                border-left: 2.5px solid red;
                background-color: #fff;
            }
            
        }
        
    }
    // 
    .van-tabs__content{
        margin-left: 90px;
    }
    .categ{
            text-align: center;
        h3{
            font-size: 16px;
            font-weight: bold;
            line-height: 45px;
            position: relative;
            height: 45px;
            &::before{
                content: "";
                position: absolute;
                width: 80%;
                border-top: 2px solid #333;
                left: 50%;
                top:50%;
                transform: translate(-50%,-50%);
                z-index: 1;
            }  
            span{
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                background-color: #fff;
                padding: 0px 20px;
                z-index: 2;
            } 

        }
        h4{
            font-size: 12px;
        }
        // 循环子分类
        .child_ca{
            display: flex;
            flex-wrap: wrap;
            li{
                flex: 33%;
                margin-bottom: 10px;
                img{
                    width: 60px;
                    height: 60px;
                }
            }
        }
    }
    

}
</style>